<template>
	<view>
		<!-- 钱包页面 -->
		<!-- 导航栏 -->
		<!-- <free-nav-bar showBack title="钱包明细"></free-nav-bar> -->

		<!-- 列表内容 -->
		<view class="px-3" v-if="list.length>0">
			<block v-for="(item, index) in list" :key="index">
				<view class="border-bottom" style="padding-top: 24rpx;" @click="purseDetail(item)">
					<view class="flex justify-between font-md  top" >
						<view class="text-primary">{{ item.name}}</view>
						<view class="nurse"  v-if="item.type==1" >+{{ item.price}}</view>
						<view class="" v-else>-{{ item.price }}</view>
					</view>
					<view class="flex justify-between py-2">
						<view class="text-primary">{{ item.createdTime }}</view>
						<view class="">余额 {{ item.amount }}</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 返回顶部 -->
		<back-top :scrollTop='scrollTop'></back-top>
		<view class="none" v-if="!list">
			<image src="../../../static/none/report.png" mode=""></image>
			<view class="">
				暂无记录~
			</view>
		</view>
		<!-- 加载更多 h5端底部导航会遮盖住它 -->
		<view style="background: rgba(216, 216, 216, 0);" v-if="isReachBottom && list.length!=0">
			<uni-load-more :status="more" @clickLoadMore="loadMore"></uni-load-more>
		</view>
		
	</view>
</template>

<script>
// import freeNavBar from '@/components/common/nav-bar/free-nav-bar.vue';
import backTop from '@/components/uni-ui/back-top/back-top.vue';
import { selectAllWalletRecords } from '@/apis/wallet/index.js'
import uniLoadMore from '@/components/uni-ui/uni-load-more/uni-load-more.vue';
export default {
	data() {
		return {
			scrollTop:0,
			list: [],
			pageNum:1,
			isReachBottom: false,
			more: 'loading', //more/loading/noMore
		};
	},
	onLoad() {
	},
	onShow() {
		console.log(this.list,'.........');
		if(this.list.length<1){
			this.pageNum=1
			this.get()
			this.more = 'more'
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	//下拉刷新
	onPullDownRefresh() {
		this.pageNum=1,
		this.more = 'more'
		this.get()
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	// 页面触底
	onReachBottom() {
		console.log('页面触底了---');
		if (this.more == 'noMore') return;
		this.isReachBottom = true;
		// 显示加载更多数据
		this.more = 'loading';
		this.pageNum++;
		this.get();
		console.log(this.pageNum)
	},
	components:{
		uniLoadMore,
		backTop
	},
	methods: {
		loadMore() {
			// console.log('加载更多');
		},
		async get(){
			let res =await selectAllWalletRecords({nurseId:this.$store.state.userInfo.id,pageSize:10,pageNum:this.pageNum})
			console.log(res.object.list,'收支记录',this.pageNum)
			if(res.success){
				if(res.object.list.length>0){
					if(this.isReachBottom ){
					this.list.push(...res.object.list)
					}else{
						this.list = res.object.list
					}
				}else{
					if (this.isReachBottom) {
						this.more = 'noMore';
						this.pageNum = 1;
					} else {
						this.list = [];
						this.isReachBottom = false;
					}
				}
			}
			
		},
		// 查看钱包明细
		purseDetail(item){
			uni.navigateTo({
				url:'../purse-detail/purse-detail?id='+item.id
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	.none{
		padding-top:180rpx;
		image{
			width: 442rpx;
			height: 284rpx;
			display: block;
			margin:0 auto;
		}
		view{
			font-size: 36rpx;
			font-weight: 500;
			color: #3E3E3E;
			margin-top:80rpx;
			text-align: center;
		}
	}
	.top{

		color: #333333;
		.nurse{
			color:red;
		}
	}
	
</style>
